<template>
    <!-- 帮助绑定微信 -->
    <div v-show="overlayShow" class="bind-wechat-explain">
        <!-- 帮助绑定微信弹窗 -->
        <div class="wechat-bind-qr-code">
            <div class="wechat-service-qr-code-hint">
                <div class="wechat-service-qr-code-hint-title">30秒绑定微信</div>
                <div class="wechat-service-qr-code-hint-top">
                    <span class="roundness-qrcode-hint-one roundness-qrcode-hint">1</span>
                    <span class="line-qrcode-hint"></span>
                    <span class="roundness-qrcode-hint-two roundness-qrcode-hint">2</span>
                </div>
                <div class="wechat-service-qr-code-hint-bottom">
                    <div class="wechat-service-qr-code-hint-bottom-left wechat-service-qr-code-hint-bottom-child">
                        <div>验证码 "<span id="bing-wechat-verification-code">{{verificationCode}}</span>"</div>
                        <div>
                            <a 
                            id="copy-verification-code" 
                            v-clipboard:copy="verificationCode" 
                            v-clipboard:success="onCopySuccess" 
                            v-clipboard:error="onCopyError"
                            >
                                {{copyText}}
                            </a>
                        </div>
                    </div>
                    <div class="wechat-service-qr-code-hint-bottom-right wechat-service-qr-code-hint-bottom-child">
                        <div>请加下方微信，</div>
                        <div>回复验证码,立即绑定!</div>
                    </div>
                </div>
            </div>
            <div class="wechat-service-qr-code-img-par">
                <image-vant id="wechat-service-qr-code-img" class="visit-count-icon" :src="qrcode" />
            </div>
        </div>
		<van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义组件
import ImageVant from '_components/project/common/ImageVant'

// UI组件
import { Overlay } from "vant"

import VueClipboard from 'vue-clipboard2'

// Vue
import Vue from 'vue'

Vue.use(VueClipboard).use(Overlay)

export default {
    name: 'BindWechatExplain',
    props: {
        verificationCode: { // 验证码
            default: '',
        },
        qrcode: { // 二维码
            type: String,
            default: '',
        },
    },
    data() {
        return {
            copyText: '复制验证码',
            overlayShow: false,
        }
    },
    methods: {
        onCopySuccess() {
            this.copyText = '复制成功'
        },
        onCopyError() {
            this.copyText = '复制失败'
        },
        showOverlay() {
            this.overlayShow = true
        },
        hideOverlay() {
            this.overlayShow = false
        },
    },
    deactivated() {
        this.hideOverlay()
    },
    components: {
        ImageVant,
    }
}
</script>

<style lang="scss" scoped>
/* 绑定微信弹窗 */
.wechat-bind-qr-code {
    width: 280px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 102;
    background: white;

    .wechat-service-qr-code-hint {
        text-align: center;
        padding: 0 20px;
        width: 100%;
        margin-top: 12px;
    }

    .wechat-service-qr-code-hint-title {
        font-weight: bold;
        font-size: 14px;
        line-height: 35px;
    }

    .wechat-service-qr-code-hint-top {
        display: -webkit-flex;
        display: flex;
        align-items: center;
        height: 30px;
        padding: 0 10%;
    }

    .roundness-qrcode-hint-one {
        background: #0077bf;
        color: white;
    }

    .roundness-qrcode-hint {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .line-qrcode-hint {
        height: 0px;
        border-bottom: 1px dashed #0077bf;
        width: 100%;
        margin: 0 5px;
    }

    .roundness-qrcode-hint-two {
        border: 1px solid #0077bf;
        color: #0077bf;
    }

    .wechat-service-qr-code-hint-bottom {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        height: 60px;
        justify-content: space-between;
        font-size: 12px;
    }

    #bing-wechat-verification-code {
        color: red;
        font-weight: bold;
    }

    #copy-verification-code {
        display: inline-block;
    }

    .wechat-service-qr-code-img-par {
        text-align: center;
    }
            
    #wechat-service-qr-code-img {
        width: 120px;
        height: 120px;
        margin-top: 10px;
    }
}
/* 结束 */
</style>